<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>患者端 - 脑梗康复系统</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; background: #f5f8ff; margin: 0; }
    .login, .main, .page { width: 100%; max-width: 420px; margin: 60px auto; background: #fff;
                           border-radius: 16px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    h1 { text-align: center; color: #2a4d9b; margin-bottom: 20px; }
    label { display: block; margin-top: 15px; font-weight: bold; }
    input { width: 100%; padding: 10px; margin-top: 6px; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; }
    button { width: 100%; padding: 10px; margin-top: 25px; background: #2a4d9b; color: white; font-size: 18px;
             border: none; border-radius: 8px; cursor: pointer; }
    button:hover { background: #1e3d85; }
    .card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 15px; }
    .progress-bar { height: 12px; border-radius: 6px; background: #d9e1f9; overflow: hidden; margin-top: 5px; }
    .progress-inner { height: 12px; background: #2a4d9b; }
    .risk { font-weight: bold; }
    .low { color: #22a06b; } .mid { color: #f5a524; } .high { color: #e5484d; }
    nav { display: flex; justify-content: space-around; background: #fff; padding: 10px 0;
          position: fixed; bottom: 0; width: 100%; border-top: 1px solid #ccc; }
    nav button { background: none; color: #2a4d9b; font-size: 16px; border: none; cursor: pointer; }

    /* AI 聊天样式 */
    #chatBox { height: 300px; overflow-y: auto; border: 1px solid #ccc; border-radius: 10px;
               padding: 10px; background: #fafafa; margin-top: 10px; }
    .msg { margin: 8px 0; }
    .user { text-align: right; color: #2a4d9b; }
    .ai { text-align: left; color: #555; }

    /* 跌倒检测 */
    #fallStatus { font-size: 20px; font-weight: bold; margin: 10px 0; }
  </style>
</head>
<body>

<!-- 登录页面 -->
<div class="login" id="loginPage">
  <h1>患者登录</h1>
  <label>病例号：</label>
  <input type="text" id="caseId" placeholder="输入病例号" value="123456">
  <label>密码：</label>
  <input type="password" id="password" placeholder="输入密码" value="123456">
  <button onclick="login()">登录</button>
</div>

<!-- 主页 -->
<div class="main" id="mainPage" style="display:none;">
  <h1>脑梗康复患者端</h1>

  <div class="card">
    <h3>基本信息</h3>
    <p>病例号：<span id="caseInfo"></span></p>
    <p>评估指数：<span id="assessScore"></span> / 100</p>
    <p>康复阶段：第 <span id="rehabDay"></span> 天</p>
    <div>进度：
      <div class="progress-bar"><div id="progress" class="progress-inner"></div></div>
      <span id="progressPct"></span>%
    </div>
    <p>风险等级：<span id="risk" class="risk"></span></p>
  </div>

  <div class="card">
    <h3>训练计划</h3>
    <ul id="planList"></ul>
  </div>

  <div class="card">
    <h3>健康指标</h3>
    <p>血压：<span id="bp"></span> mmHg</p>
    <p>医生建议：<span id="advice"></span></p>
  </div>

  <button style="background:#e5484d;" onclick="alert('已发送紧急求助信号给医生！')">🚨 紧急求助</button>
</div>

<!-- 跌倒检测页面 -->
<div class="page" id="fallPage" style="display:none;">
  <h1>跌倒检测</h1>
  <div class="card">
    <p id="fallStatus">安全状态 ✅</p>
    <button onclick="simulateFall()">模拟检测</button>
    <p id="fallLog" style="margin-top:10px;color:#666;font-size:14px;">系统实时监测中...</p>
    <button style="margin-top:15px;background:#e5484d;" onclick="alert('已发送求助信号！')">一键求助 🚨</button>
  </div>
</div>

<!-- AI 陪聊页面 -->
<div class="page" id="chatPage" style="display:none;">
  <h1>AI 康复陪聊</h1>
  <div id="chatBox"></div>
  <div style="display:flex;margin-top:10px;">
    <input type="text" id="userInput" placeholder="说点什么..." style="flex:1;margin-right:8px;">
    <button onclick="sendMsg()">发送</button>
  </div>
</div>

<!-- 底部导航栏 -->
<nav id="navBar" style="display:none;">
  <button onclick="showPage('mainPage')">🏠 首页</button>
  <button onclick="showPage('fallPage')">🧍 跌倒检测</button>
  <button onclick="showPage('chatPage')">💬 陪聊</button>
  <button onclick="logout()">🚪 退出</button>
</nav>

<script>
const mockPatient = {
  caseId: "123456",
  assessScore: 78,
  rehabDay: 12,
  progressPct: 42,
  risk: "中级",
  plan: ["上肢主动关节活动 15min × 2", "坐立转移训练 10min × 2", "步行训练 8min × 3", "呼吸肌训练 5min × 2"],
  bloodPressure: { sbp: 128, dbp: 82 },
  advice: "按计划训练；控盐控脂；每日监测血压两次并记录。"
};

function login() {
  const id = document.getElementById('caseId').value;
  const pwd = document.getElementById('password').value;
  if (id === "123456" && pwd === "123456") {
    document.getElementById('loginPage').style.display = 'none';
    document.getElementById('mainPage').style.display = 'block';
    document.getElementById('navBar').style.display = 'flex';
    renderData(mockPatient);
  } else alert("病例号或密码错误！");
}

function logout() {
  document.getElementById('loginPage').style.display = 'block';
  document.querySelectorAll('.main, .page').forEach(e => e.style.display = 'none');
  document.getElementById('navBar').style.display = 'none';
}

function showPage(page) {
  document.querySelectorAll('.main, .page').forEach(e => e.style.display = 'none');
  document.getElementById(page).style.display = 'block';
}

function renderData(p) {
  document.getElementById('caseInfo').textContent = p.caseId;
  document.getElementById('assessScore').textContent = p.assessScore;
  document.getElementById('rehabDay').textContent = p.rehabDay;
  document.getElementById('progress').style.width = p.progressPct + '%';
  document.getElementById('progressPct').textContent = p.progressPct;
  document.getElementById('risk').textContent = p.risk;
  document.getElementById('risk').className = 'risk ' + (p.risk === '低级' ? 'low' : p.risk === '高级' ? 'high' : 'mid');
  document.getElementById('planList').innerHTML = p.plan.map(i => `<li>${i}</li>`).join('');
  document.getElementById('bp').textContent = p.bloodPressure.sbp + '/' + p.bloodPressure.dbp;
  document.getElementById('advice').textContent = p.advice;
}

// 跌倒检测模拟
function simulateFall() {
  const statusList = ["安全状态 ✅", "可疑姿态 ⚠️", "跌倒警告 🚨"];
  const colors = ["#22a06b", "#f5a524", "#e5484d"];
  const i = Math.floor(Math.random() * 3);
  document.getElementById("fallStatus").textContent = statusList[i];
  document.getElementById("fallStatus").style.color = colors[i];
  document.getElementById("fallLog").textContent = "检测时间：" + new Date().toLocaleTimeString();
}

// AI 陪聊模块
const aiReplies = [
  "您好～今天感觉恢复得怎么样？",
  "记得按时做训练哦，坚持才会进步 💪",
  "可以听听舒缓的音乐，放松心情。",
  "很好，您今天的康复进度已经比昨天更好了！"
];

function sendMsg() {
  const input = document.getElementById("userInput");
  const text = input.value.trim();
  if (!text) return;
  appendMsg(text, "user");
  input.value = "";
  setTimeout(() => {
    const reply = aiReplies[Math.floor(Math.random() * aiReplies.length)];
    appendMsg(reply, "ai");
  }, 600);
}

function appendMsg(text, type) {
  const box = document.getElementById("chatBox");
  const div = document.createElement("div");
  div.className = "msg " + type;
  div.textContent = text;
  box.appendChild(div);
  box.scrollTop = box.scrollHeight;
}
</script>
</body>
</html>
